﻿<style>
    .el-upload-list--picture-card .el-upload-list__item{
        width:68PX;
        height:68PX;
    }
    .el-upload--picture-card {
        width: 68PX;
        height: 68PX;
        line-height:70PX;
    }
</style>
<template>
    <el-col :sm="24" :md="24">
        <i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
        <i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
        <p style="FONT-SIZE: 16PX; MARGIN-BOTTOM: 5PX;" v-text="pzoption.title"></p>
        <el-input v-model="pzoption.value" style="display:none">
        </el-input>
        <el-dialog :visible.sync="childpro.dialogVisible">
            <img width="100%" :src="childpro.dialogImageUrl" alt="">
        </el-dialog>
        <el-table :data="childpro.dataset" style="width: 100%" stripe border fit :row-class-name="tableRowClassName">
            <el-table-column label="姓名" min-width="100" align="center">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.xm"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="手机号" min-width="100" align="center">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.tel"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="资质图片" min-width="120" align="center">
                <template slot-scope="scope">
                    <!--<el-upload class="upload-demo"
                       action="/api/File/UPFILE"
                       multiple

                       list-type="picture-card"
                       :file-list="scope.row.files">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>-->
                    <el-upload action="/api/File/UPFILE"
                               list-type="picture-card"
                               multiple
                               :on-preview="handlePictureCardPreview"
                               :file-list="scope.row.files"
                               :on-change="(file, filelist) =>{return  handleChange(file, filelist,scope.row)}">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </template>
            </el-table-column>
            <el-table-column type="index" width="50" fixed="left"> </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="delRow(scope.$index,childpro.dataset)"
                               type="text"
                               size="small">
                        删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-button type="primary" size="mini" class="mt10 pull-right" @click="addRow">添加行<i class="el-icon-plus"></i></el-button>


    </el-col>

</template>
<style>
</style>
<script>
    module.exports = {
        props: ['pzoption', 'index'],
        data() {
            return {

                dialogInputVisible: false,
                childpro: {
                    dialogImageUrl: '',
                    dialogVisible: false,
                    placeholder: "占位符",
                    disabled: false,
                    dataset: [],
                    tabname: "",
                    rules: {
                        required: false, message: '不能为空', type: "string"
                    }
                }

            };
        },
        methods: {
            genID: function () {
                var random = Math.floor(Math.random() * (90000 - 10000 + 1) + 10000);
                return random;
            },
            tableRowClassName: function ({ row, rowIndex }) {
                //把每一行的索引放进row
                row.index = rowIndex;
            },
            delWid: function (wigdetcode) {
                this.$root.nowwidget = {};
                _.remove(this.$root.FormData.wigetitems, function (obj) {
                    return obj.wigdetcode == wigdetcode;
                });
            },
            handleChange: function (file, fileList, row) {
                for (var i = 0; i < fileList.length; i++) {
                    if (fileList[i].response && fileList[i].response.Result) {
                        fileList[i].url = fileList[i].response.Result[0];
                        fileList[i].response = fileList[i].response.Result[0];
                    }
                }
                row.files = fileList;
               // this.pzoption.value = JSON.stringify(fileList);
            },
            handlePictureCardPreview(file) {
                this.childpro.dialogImageUrl = file.url;
                this.childpro.dialogVisible = true;
            },
            addRow: function () {
                var chi = this;
                var temp = {"xm":"","tel":"","files":[]};
               // _.forEach(chi.childpro.columdata, function (col) {
                 //   temp[col.colid] = col.defvalue;
                //})
                chi.childpro.dataset.push(temp);
            },

            delRow: function (index, rows) {
                rows.splice(index, 1);

            }
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
                if (pro.$root.addchildwig) {
                    pro.$root.addchildwig();//不能缺少,dom加载完成
                }
                if (pro.pzoption.childpro.placeholder) {
                    pro.childpro = pro.pzoption.childpro;
                } else {
                    pro.pzoption.childpro = pro.childpro;

                }
            })

        },
        watch: {
            'pzoption.value': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    if (newV) {
                        this.childpro.dataset = JSON.parse(newV);
                    }
                },
                deep: true
            },
            'childpro.dataset': {
                handler(newV, oldV) {
                    if (newV) {
                        this.pzoption.value = JSON.stringify(this.childpro.dataset).replace(/null/g, '""');

                    }
                },
                deep: true
            },

        },
        created() {
            this.$nextTick(function () {
                // DOM 更新了
                // console.debug(this.$refs.refCol)
                // this.mangerel(this.$refs.refCol)
            })
        }
    };
</script>